<template>
  <view class="apply_easypay_qrcode_step2">
    <steps :active="2"></steps>
    <scroll-view class="scroll-wrap" :scroll-y="true" :style="{height: (safeHeight - safeWidth / 375 * (101 + 64)) + 'px'}">
      <view class="form-wrap">
        <form>
          <view class="form-item" >
            <view class="form-item-head">
              <view class="title">
                营业执照
              </view>
              <!-- <view class="sample">
                <text>示例</text>
              </view> -->
            </view>
            <view class="form-item-content">
              <view class="common-img-wrap" @click="uploadFile(1)">
                <view class="no-upload-img" v-if="!data.businessLicenseFileId || !data.businessLicenseUrl">
                  <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                  <view class="text">
                    上传营业执照
                  </view>
                </view>
                <view class="upload-img-wrap" v-else>
                  <image :src="data.businessLicenseUrl" mode="" class="upload-img"></image>
                </view>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-item-head">
              <view class="title">
                {{userType == 3 ? '法人' : '申请人'}}身份证
              </view>
              <!-- <view class="sample">
                <text>示例</text>
              </view> -->
            </view>
            <view class="form-item-content" style="display: flex;">
              <view class="common-img-wrap" @click="uploadFile(2)">
                <view class="no-upload-img" v-if="!data.userFaceFileId || !data.userFaceFileUrl">
                  <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                  <view class="text">
                    上传{{userType == 3 ? '法人' : '申请人'}}身份证正面
                  </view>
                </view>
                <view class="upload-img-wrap" v-else>
                  <image :src="data.userFaceFileUrl" mode="" class="upload-img"></image>
                </view>
              </view>
              <view class="common-img-wrap" style="margin-left: 27rpx;" @click="uploadFile(3)">
                <view class="no-upload-img" v-if="!data.userBackFileId || !data.userBackFileUrl">
                  <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                  <view class="text">
                    上传{{userType == 3 ? '法人' : '申请人'}}身份证反面
                  </view>
                </view>
                <view class="upload-img-wrap" v-else>
                  <image :src="data.userBackFileUrl" mode="" class="upload-img"></image>
                </view>
              </view>
            </view>
          </view>
          
          <view class="form-item" v-if="userType != 3">
            <view class="form-item-head">
              <view class="title">
                申请人手持身份证照
              </view>
              <!-- <view class="sample">
                <text>示例</text>
              </view> -->
            </view>
            <view class="form-item-content" style="display: flex;">
              <view class="common-img-wrap" @click="uploadFile(4)">
                <view class="no-upload-img" v-if="!data.userCardHeaderFileId || !data.userCardHeaderFileUrl">
                  <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                  <view class="text">
                    上传身份证正面
                  </view>
                </view>
                <view class="upload-img-wrap" v-else>
                  <image :src="data.userCardHeaderFileUrl" mode="" class="upload-img"></image>
                </view>
              </view>
              <!-- <view class="common-img-wrap" style="margin-left: 27rpx;" @click="uploadFile(3)">
                <view class="no-upload-img" v-if="!data.identityBackFileId || !data.identityBackUrl">
                  <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                  <view class="text">
                    上传法人身份证反面
                  </view>
                </view>
                <view class="upload-img-wrap" v-else>
                  <image :src="data.identityBackUrl" mode="" class="upload-img"></image>
                </view>
              </view> -->
            </view>
          </view>
        </form>
      </view>
      
      <view class="tip-wrap">
        <view class="head">
          <view class="title">
            上传标准
          </view>
          <view class="desc">
            <text>拍摄时请确保身份证</text>
            <text class="warning-info">边框完整，字体清晰，亮度均匀</text>
          </view>
        </view>
        <view class="content">
          <view class="sub-content">
            <image src="/static/image/qrcode/standard-1.png" mode="" class="img"></image>
            <view class="text">
              标准样式
            </view>
          </view>
          <view class="sub-content">
            <image src="/static/image/qrcode/non-standard-2.png" mode="" class="img"></image>
            <view class="text">
              拍摄不完整
            </view>
          </view>
          <view class="sub-content">
            <image src="/static/image/qrcode/non-standard-3.png" mode="" class="img"></image>
            <view class="text">
              拍摄模糊
            </view>
          </view>
          <view class="sub-content">
            <image src="/static/image/qrcode/non-standard-4.png" mode="" class="img"></image>
            <view class="text">
              闪光遮挡
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    
    <view class="qrcode_selected_platform-footer">
      <button type="primary" class="qrcode_selected_platform-footer-btn" @click="submitInfo" v-if="status == null || status == 1">下一步</button>
      <button type="primary" class="qrcode_selected_platform-footer-btn" @click="nextStep" v-else>下一步</button>
    </view>
  </view>
  
</template>

<script>
import formValid from '@/unit/graceChecker.js'
import steps from '../common/steps.vue'
import { uploadFile } from '@/unit/common.js'
import { getEasyPayInfoApi, getIdentityInfoSyncApi, getLicenseInfoSyncApi} from '@/service/qrCode/qrCode.service.js'
import { discernCharterApi, discernCardApi } from '@/service/common/common.service.js'
export default {
  components: {
    steps
  },
  data () {
    return {
      status: null,
      userType: null,
      data: {
        businessLicenseUrl: null, // 营业执照地址
        businessLicenseFileId: null, // 营业执照图片ID
        // identityFaceFileId: null, // 法人正面证件照ID
        // identityFaceUrl: null, // 法人正面证件照地址
        // identityBackFileId: null, // 法人背面证件照ID
        // identityBackUrl: null ,// 法人背面证件照地址
        userFaceFileId: null , // 本人身份证正面
        userFaceFileUrl: null , // 本人身份证正面
        userBackFileId: null, // 本人身份证反面
        userBackFileUrl: null, // 本人身份证反面
        //  法人身份证识别信息
        realName: null,  // name
        idnoType: 1, //
        idno: null, // num
        idExpireDate: null ,// endDate
        // 营业执照识别信息
        licenseName: null, // name
        licenseNum: null, //  regNum 
        licenceBeginDate: null, //  establishDate
        licenceEndDate: null, //  validPeriod 
        registeredCapital: null, //  capital 
        scope: null, //  business
        userCardHeaderFileId: null, // 用户手持身份证正面照Id
        userCardHeaderFileUrl: null // 用户手持身份证正面照地址
      }
    }
  },
  methods: {
    nextStep () {
      uni.navigateTo({
        url: '/pages/qrCode/applyEasypay/step3?userType=' + this.userType
      })
    },
    submitInfo () {
      let rule = [
        {name:'businessLicenseUrl', checkType : 'notnull', checkRule:'',  errorMsg:'请上传营业执照照片'},
        // {name:'identityFaceUrl', checkType : 'notnull', checkRule:'',  errorMsg:'请上传法人正面照'},
        // {name:'identityBackUrl', checkType : 'notnull', checkRule:'',  errorMsg:'请上传法人背面照'},
        {name:'userFaceFileUrl', checkType : 'notnull', checkRule:'',  errorMsg:'请上传法人正面照'},
        {name:'userBackFileUrl', checkType : 'notnull', checkRule:'',  errorMsg:'请上传法人背面照'},
        {name:'licenseName', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的营业执照'},
        {name:'licenseNum', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的营业执照'},
        {name:'licenceBeginDate', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的营业执照'},
        {name:'licenceEndDate', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的营业执照'},
        {name:'registeredCapital', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的营业执照'},
        {name:'scope', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的营业执照'},
        {name:'realName', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的法人正面照'},
        {name:'idnoType', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的法人正面照'},
        {name:'idno', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的法人正面照'},
        {name:'idExpireDate', checkType : 'notnull', checkRule:'',  errorMsg:'请上传正确的法人背面照'}
      ];
      if (this.userType != 3) {
        rule.splice(1, 0, {
          name:'userCardHeaderFileId', checkType : 'notnull', checkRule:'',  errorMsg:'请上传本人手持身份证正面照'
        });
      }
      var checkRes = formValid.check(this.data, rule);
      if (checkRes) {
        uni.setStorage({
          key: 'qrcode_step2_data',
          data: Object.assign(this.data),
          success: () => {
            uni.navigateTo({
              url: '/pages/qrCode/applyEasypay/step3?userType=' + this.userType
            })
          },
          fail: () => {
            uni.showToast({
              title: '存储信息失败，请重试！',
              icon: 'none'
            })
          }
        });
      } else {
        uni.showToast({ title: formValid.error, icon: "none" });
      }
    },
    async uploadFile (type) {
      if (this.status != null && this.status != 1) {
        return false;
      }
      uploadFile({
        success: (res) => {
          switch (type) {
          case 1:
            discernCharterApi({
              isFace: 0,
              appliedType: 2,
              url: res.data.url,
              id: res.data.id
            }, (callback) => {
              if (callback.status == 0) {
                this.data.licenseName = callback.data.name; // name 
                this.data.licenseNum = callback.data.regNum; //  regNum 
                this.data.licenceBeginDate = callback.data.establishDate; //  establishDate
                this.data.licenceEndDate = callback.data.validPeriod; //  validPeriod 
                this.data.registeredCapital = callback.data.capital; //  capital 
                this.data.scope = callback.data.business; //  business
                this.data.businessLicenseFileId = res.data.id;
                this.data.businessLicenseUrl = res.data.url;
              } else {
                uni.showToast({
                  title: callback.msg,
                  icon: 'none'
                })
              }
            });
            break;
          case 2:
            discernCardApi({
              isFace: 0,
              appliedType: 2,
              url: res.data.url,
              id: res.data.id
            }, (callback) => {
              if (callback.status == 0) {
                this.data.realName = callback.data.name;
                this.data.idnoType = 1;
                this.data.idno = callback.data.num;
                this.data.userFaceFileId = res.data.id;
                this.data.userFaceFileUrl = res.data.url;
              } else {
                uni.showToast({
                  title: callback.msg,
                  icon: 'none'
                })
              }
            });
            
            break;
          case 3:
            discernCardApi({
              isFace: 1,
              appliedType: 2,
              url: res.data.url,
              id: res.data.id
            }, (callback) => {
              if (callback.status == 0) {
                this.data.idExpireDate = callback.data.endDate;
                this.data.userBackFileId = res.data.id;
                this.data.userBackFileUrl = res.data.url;
              } else {
                uni.showToast({
                  title: callback.msg,
                  icon: 'none'
                })
              }
            });
            
            break;
          case 4:
            this.data.userCardHeaderFileId = res.data.id;
            this.data.userCardHeaderFileUrl = res.data.url;
            break;
          // case 5:
          //   this.data.userBackFileId = res.data.id;
          //   this.data.userBackFileUrl = res.data.url;
          //   break;
          default:
          }
        }
      });
    },
    getEasypayInfo () {
      getEasyPayInfoApi({}, res => {
        if (res.status == 0 && res.data && res.data.id) {
          this.status = res.data.status;
          // 营业执照
          this.data.licenseName = res.data.licenseName; // name
          this.data.licenseNum = res.data.licenseNum; //  regNum 
          this.data.licenceBeginDate = res.data.licenceBeginDate; //  establishDate
          this.data.licenceEndDate = res.data.licenceEndDate; //  validPeriod 
          this.data.registeredCapital = res.data.registeredCapital; //  capital 
          this.data.scope = res.data.scope; //  business
          this.data.businessLicenseFileId = res.data.licenseImage.id;
          this.data.businessLicenseUrl = res.data.licenseImage.url;
          // 法人身份证
          this.data.realName = res.data.realName;
          this.data.idnoType = res.data.idnoType;
          this.data.idno = res.data.idno;
          this.data.userFaceFileId = res.data.idnoImage1.id;
          this.data.userFaceFileUrl = res.data.idnoImage1.url;
          this.data.idExpireDate = res.data.idExpireDate;
          this.data.userBackFileId = res.data.idnoImage2.id;
          this.data.userBackFileUrl = res.data.idnoImage2.url;
          // 本人身份证
          this.data.userCardHeaderFileId = res.data.idnoHeaderImage.id;
          this.data.userCardHeaderFileUrl = res.data.idnoHeaderImage.url;
        } else if (res.status == 0 && !res.data) {
          this.init();
        }
      });
    },
    init () {
      let that = this;
      uni.getStorage({
        key: 'qrcode_step2_data',
        success: (res) => {
          this.data = res.data;
        },
        fail: () => {
          that.initInfo();
        }
      });
    },
    async initInfo () {
      let licenseInfo = await getLicenseInfoSyncApi({});
      let identityInfo = await getIdentityInfoSyncApi({});
      if (licenseInfo) {
        // 营业执照
        this.data.licenseName = licenseInfo.name; // name
        this.data.licenseNum = licenseInfo.regNum; //  regNum 
        this.data.licenceBeginDate = licenseInfo.establishDate; //  establishDate
        this.data.licenceEndDate = licenseInfo.validPeriod; //  validPeriod 
        this.data.registeredCapital = licenseInfo.capital; //  capital 
        this.data.scope = licenseInfo.business; //  business
        this.data.businessLicenseFileId = licenseInfo.fileId;
        this.data.businessLicenseUrl = licenseInfo.fileUrl;
      }
      if (identityInfo) {
        this.data.realName = identityInfo.name;
        this.data.idnoType = 1;
        this.data.idno = identityInfo.num;
        this.data.userFaceFileId = identityInfo.fileFaceId;
        this.data.userFaceFileUrl = identityInfo.userFaceUrl;
        this.data.idExpireDate = identityInfo.endDate;
        this.data.userBackFileId = identityInfo.fileBackId;
        this.data.userBackFileUrl = identityInfo.userBackUrl;
      }
    }
  },
  mounted () {
    this.getEasypayInfo();
  },
  onShow() {
    // 
  },
  onLoad (option) {
    this.userType = option.userType;
  }
}
</script>

<style lang="scss" scoped>
  .apply_easypay_qrcode_step2 {
    .scroll-wrap {
      height: calc(100vh - 52px - 101px);
    }
    .form-wrap {
      background-color: #FFFFFF;
      padding: 0 34rpx 22rpx;
      margin-top: 30rpx;
      .form-item {
        .form-item-head {
          overflow: hidden;
          padding-top: 40rpx;
          .title {
            float: left;
            color: #333333;
            font-size: 36rpx;
          }
          .sample {
            float: right;
            text {
              color: #FF7473;
              font-size: 28rpx;
              text-decoration: underline;
            }
          }
          &:after {
            clear: both;
          }
        }
        .form-item-content {
          margin-top: 30rpx;
          .common-img-wrap {
            width: 330rpx;
            height: 200rpx;
            border: 1px dashed #E1E1E1;
            border-radius: 16rpx;
            
            .no-upload-img {
              width: 100%;
              height: 100%;
              display: flex;
              flex-flow: column;
              align-items: center;
              justify-content: center;
              .img {
                width: 80rpx;
                height: 80rpx;
              }
              .text {
                margin-top: 29rpx;
                color: #666666;
                font-size: 24rpx;
                font-weight:500;
              }
            }
            
            .upload-img-wrap {
              width: 100%;
              height: 100%;
              
              .upload-img {
                width: 100%;
                height: 100%;
                border-radius: 16rpx;
              }
            }
          }
        }
      }  
    }
    
    .tip-wrap {
      background-color: #FFFFFF;
      padding: 40rpx 32rpx;
      margin-top: 30rpx;
      .head {
        
        .title {
          color: #333333;
          font-size: 36rpx;
        }
        .desc {
          margin-top: 19rpx;
          color: #333333;
          font-size: 24rpx;
          
          .warning-info {
            margin-left: 18rpx;
            color: #FF7473;
          }
        }
      }
      .content {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;
        .sub-content {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .img {
            width: 140rpx;
            height: 140rpx;
          }
          .text {
            // margin-top: 26rpx;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }
    }
    .qrcode_selected_platform-footer {
      position: fixed;
      bottom: 0rpx;
      left: 0rpx;
      width: 100%;
      height: 125rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1rpx solid #E1E1E1;
      background: #FFFFFF;
      .qrcode_selected_platform-footer-btn {
        width: 700rpx;
        height: 90rpx;
        line-height: 90rpx;
        background-color: #434343;
        color: #F6DA99;
        font-size: 30rpx;
      }
    }
  }
  
</style>
